<template>
	<view>
		<navbar title="搜索"></navbar>
		<view class="search-wrapper fa bgf">
			<view class="search-box flex1 fa">
				<image class="search-img" src="../../static/search.png" mode=""></image>
				<input class="flex1" type="text" placeholder="请输入关键字" v-model="keyword" @input="goodsInput" @confirm="goSearch" />
			</view>
			<view class="search-btn fa jcc themebg" @click="goSearch">搜索</view>
		</view>
		<view class="history-wrapper" v-if="historyList[0]">
			<view class="history-title fa jcsb">
				<view class="title">历史搜索</view>
				<image class="delete-icon" src="../../static/delete.png" mode="" @click="deleteHistory"></image>
			</view>
			<view class="history-box fa fww">
				<view class="history-list fa" v-for="(item, index) in historyList" :key="index" @click="searchGoods(item)">{{item}}</view>
			</view>
		</view>
		<view class="history-wrapper">
			<view class="history-title fa jcsb">
				<view class="title">热门搜索</view>
			</view>
			<view class="history-box fa fww">
				<view class="history-list fa" v-for="(item, index) in hotList" :key="index" @click="searchGoods(item)">{{item}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				hotList: [],
				historyList: []
			};
		},
		onLoad() {
			if(uni.getStorageSync('history')) {
				this.historyList = uni.getStorageSync('history')
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			goodsInput() {
				if(this.keyword == '') {
					this.getList()
				}
			},
			goSearch() {
				if(!this.keyword) return uni.showToast({
					title: '请输入关键字',
					icon: 'none'
				})
				if(this.historyList.indexOf(this.keyword) < 0) {
					this.historyList.reverse()
					this.historyList.push(this.keyword)
					this.historyList.reverse();
					if(this.historyList.length > 10) {
						this.historyList.length = 10
					}
					uni.setStorageSync('history', this.historyList)
				}
				uni.navigateTo({
					url: '/pages/cate/goods_list?keyword=' + this.keyword
				})
			},
			searchGoods(keyword) {
				if(this.historyList.indexOf(keyword) < 0) {
					this.historyList.reverse()
					this.historyList.push(keyword)
					this.historyList.reverse();
					if(this.historyList.length > 10) {
						this.historyList.length = 10
					}
					uni.setStorageSync('history', this.historyList)
				}
				uni.navigateTo({
					url: '/pages/cate/goods_list?keyword=' + keyword
				})
			},
			getList() {
				this.api.hotSearchFunc().then(res => {
					if(res.code == 200) {
						this.hotList = res.data
					}
				})
			},
			deleteHistory() {
				uni.showModal({
					title: '提示',
					content: '确认要删除搜索历史吗',
					success: result => {
						if(result.confirm) {
							this.historyList = []
							uni.removeStorageSync('history')
						}
					}
				})
			},
		}
	}
</script>
<style>
	page{
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.search-wrapper{
		margin: 10rpx 24rpx;
		border-radius: 30rpx;
		background: #F5F5F5;
		.search-box{
			padding: 0 32rpx;
			height: 64rpx;
			.search-img{
				margin-right: 16rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}
		.search-btn{
			margin-left: 16rpx;
			padding: 0 32rpx;
			height: 60rpx;
			border-radius: 30rpx;
			color: #fff;
		}
	}
	.history-wrapper{
		margin: 28rpx 24rpx 0;
		.title{
			font-weight: bold;
		}
		.delete-icon{
			width: 32rpx;
			height: 32rpx;
		}
		.history-box{
			padding: 2rpx 0 24rpx;
			.history-list{
				margin-top: 24rpx;
				margin-right: 24rpx;
				padding: 0 28rpx;
				height: 50rpx;
				border-radius: 26rpx;
				font-size: 24rpx;
				background: #F5F5F5;
			}
		}
	}
</style>
